<template>
    <div>
        <!-- 产品搜索和添加 -->

        <!--
            el-form
              inline="true" 为行内的表单
              model="formInline"  表单数据对象  object

            el-form-item 表单控件 每一项内容
              
            v-model="formInline.user" 获取forminline的内容绑定上来

            el-date-picker 日期组件
          -->
        <div class="header">
            <div class="form">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="产品名称">
                        <el-input v-model="formInline.user" size="small" placeholder="产品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="添加时间">
                        <div class="block">
                            <el-date-picker v-model="formInline.data" size="small" align="right" type="date"
                                placeholder="选择日期" :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>


            <div class="group">
                <el-button size="small" type="warning" icon="el-icon-plus" @click="toProductPage">添加商品</el-button>
                <el-button size="small" type="danger" icon="el-icon-delete">批量删除</el-button>
            </div>
        </div>
        <!-- 产品列表 -->
        <!-- 
            当el-table元素中注入data对象数组（tableData）后，
            在el-table-column中用prop属性来对应对象中的键名即可填入数据，
            用label属性来定义表格的列名。可以使用width属性来定义列宽。 
        -->
        <!-- 
            stripe 斑马纹  border 边框 fixed 固定列 scope 能拿到操作行的数据
         -->
        <div class="content">
            <el-table :data="pagetabeldata" style="width: 100%;" border header-cell-class-name="table-center"
                cell-class-name="table-center">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column fixed prop="id" label="商品编号" width="120">
                </el-table-column>
                <el-table-column prop="commodityName" label="商品名称" width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="price" label="商品价格" width="120">
                </el-table-column>
                <el-table-column prop="commodityType" label="商品类目" width="120">
                </el-table-column>
                <el-table-column label="添加时间" prop="createTime">
                    <!-- <template slot-scope="scope">
                        <span>{{ moment(scope.row.create_time).format('YYYY-MM-DD hh:mm:ss') }}</span>
                    </template> -->
                </el-table-column>
                <el-table-column prop="img" label="商品图片路径" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="commodityDetails" label="商品描述" show-overflow-tooltip>
                    <!-- <template slot-scope="scope"> -->
                    <!-- p31 -->
                    <!-- <div v-html="scope.row.descs"></div> -->
                    <!-- </template> -->
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <!-- <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)"
                            icon="el-icon-edit">编辑</el-button> -->
                        <el-button type="primary" size="mini" icon="el-icon-edit"
                            @click="bianjiformshow(scope.$index, scope.row)">编辑</el-button>

                        <el-dialog title="收货地址" :visible.sync="dialogFormVisible" width="500px" center>
                            <el-form :model="formdata">
                                <el-form-item label="商品名称">
                                    <el-input v-model="formdata.commodityName" autocomplete="off"
                                        id="commodityName"></el-input>
                                </el-form-item>
                                <el-form-item label="商品价格">
                                    <el-input v-model="formdata.price" autocomplete="off" id="price"></el-input>
                                </el-form-item>
                                <el-form-item label="商品描述">
                                    <el-input v-model="formdata.commodityDetails" autocomplete="off"
                                        id="commodityDetails"></el-input>
                                </el-form-item>
                                <el-form-item label="图片位置">
                                    <el-input v-model="formdata.img" autocomplete="off" id="img"></el-input>
                                </el-form-item>

                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">确 定</el-button>
                            </div>
                        </el-dialog>

                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
                            icon="el-icon-delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination> -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="currentPage" :page-size="pagesize" :page-sizes="[8, 12, 16]"
                layout="total, sizes, prev, pager, next, jumper" :total="prolist">
            </el-pagination>
        </div>
    </div>
</template>

<script>

// import  Pagination  from '../../../components/pagination.vue';
import moment from 'moment'
import axios from 'axios';
export default {
    props: ['isCollapse'],
    data() {
        return {

        }
    },
    components: {
        // Pagination
    },
    data() {
        return {
            formInline: {
                user: '',
                data: ''
            },
            //添加时间
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            //编辑弹出框
            dialogFormVisible: false,
            form: {
                name: '',
                address: '',
            },
            //弹出框宽度
            formLabelWidth: '120px',
            //formInputWidth:'110px',
            //表单数据
            tableData: [],
            //编辑dia里的东西
            formdata: {
                id: 0,
                commodityName: '',
                price: 0,
                commodityDetails: '',
                img: '',
                address: '',
                commodityType: '',
                commodityTypeNavigation: null,
                createTime: '',
                todayOrders: '',
                todayPaymentVolume: '',
                totalOrders: '',
                totalPaymentVolume: '',
                updateTime: '',
                visits: '',
            },
            //分页
            prolist: 0,//商品条数
            pagesize: 8,  //每页数据
            currentPage: 1,//初始页面
            pagetabeldata: []//展示数据

        }

    },
    methods: {
        moment,//注册方法
        //点击添加跳转界面--------
        toProductPage() {
            //console.log('添加跳转界面----')
            this.$router.push('/product/add-product')
        },
        // onSubmit(){
        // },
        //分页
        handleSizeChange(size) {
            // console.log(`每页 ${size} 条`);
            this.pagesize = size;
            // console.log(this.pagesize, "每页多少数据");
            this.getpageinfo()
        },
        handleCurrentChange(currentPage) {
            // console.log(`当前页: ${currentPage}`);
            this.currentPage = currentPage
            // console.log(this.currentPage, "第几页");
            this.getpageinfo()
        },
        //查询
        onSubmit() {
            console.log('submit!', this.formInline);
        },
        //编辑dia弹出
        bianjiformshow(index, row) {
            this.dialogFormVisible = true;
            this.formdata.id = row.id
            this.formdata.commodityName = row.commodityName
            this.formdata.price = Number(row.price) 
            this.formdata.commodityDetails = row.commodityDetails
            this.formdata.img = row.img
            this.formdata.address = row.address
            this.formdata.commodityType = row.commodityType

            this.formdata.commodityTypeNavigation = row.commodityTypeNavigation
            this.formdata.createTime = row.createTime
            this.formdata.todayOrders = row.todayOrders
            this.formdata.todayPaymentVolume = row.todayPaymentVolume
            this.formdata.totalOrders = row.totalOrders
            this.formdata.totalPaymentVolume = row.totalPaymentVolume
            this.formdata.updateTime = row.updateTime
            this.formdata.visits = row.visits
            // console.log(index, "点击编辑时数据");
            console.log(row, "点击编2123辑时数据");
        },
        //编辑确定
        handleEdit(index, row) {
            //form表要传给数据库，看是否成功
            //console.log(index, "这是第几行数据");
            // console.log(this.formdata.id,this.formdata.commodityDetails,this.formdata.commodityName,
            // this.formdata.img,this.formdata.price,this.formdata.address,this.formdata.commodityType,"commodityTypeNavigation",
            // this.formdata.commodityTypeNavigation, this.formdata.createTime,this.formdata.todayOrders,
            // this.formdata.todayPaymentVolume,this.formdata.totalOrders,this.formdata.totalPaymentVolume,
            // this.formdata.updateTime,this.formdata.visits,);
            axios({
                url: 'https://lvyou.free.svipss.top/commodity/updatecommodities',
                method: "post",
                data: {
                    Id: this.formdata.id,
                    CommodityDetails: this.formdata.commodityDetails,
                    CommodityName: this.formdata.commodityName,
                    Img: this.formdata.img,
                    Price: this.formdata.price,
                    Address: this.formdata.address,
                    commodityType: this.formdata.commodityType,
                    commodityTypeNavigation: this.formdata.commodityTypeNavigation,
                    createTime: this.formdata.createTime,
                    todayOrders: this.formdata.todayOrders,
                    todayPaymentVolume: this.formdata.todayPaymentVolume,
                    totalOrders: this.formdata.totalOrders,
                    totalPaymentVolume: this.formdata.totalPaymentVolume,
                    updateTime: this.formdata.updateTime,
                    visits: this.formdata.visits,
                }
            })
                .then(function (res) {
                    console.log(res, "成功");
                    //  this.jqrouter.push("/login")
                    this.getpageinfo()
                })
                .catch(function (res) {
                    console.log(res, "编辑失败");
                })
            this.dialogFormVisible = false;

        },
        //删除
        handleDelete(index, row) {
            console.log('删除操作--', index, row);
            this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios({
                    method: 'delete',
                    url: 'https://lvyou.free.svipss.top/commodity/deletecommodities?id=' + row.id + '',
                    data: {}  // 请求参数放在请求体
                }).then(res => {
                    console.log(res)
                    this.getpageinfo()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // async projectList(page) {
        //     let res = await this.$api.projectList({ page })
        //     console.log('产品列表数据---', res.data);
        // },
        //获取数据
        selectprodata() {
            //console.log();
            axios
                .get('https://lvyou.free.svipss.top/commodity/getcommoditieslist')
                .then((res) => {
                    this.tableData = res.data.data;
                    console.log(this.tableData)
                    //获取商品有多少条数据
                    this.prolist = res.data.data.length;
                    this.getpageinfo()
                    //console.log(this.prolist)
                },
                    // 失败回调
                    error => {
                        console.log('请求失败！')
                        // 请求失败原因
                        console.log(error.message)
                    }
                )

        },
        //获取当前页面信息
        getpageinfo() {
            this.pagetabeldata = [];
            for (let i = (this.currentPage - 1) * this.pagesize; i < this.prolist; i++) {
                //把遍历的数据添加到pagetabeldata里
                this.pagetabeldata.push(this.tableData[i]);
                //console.log(this.pagetabeldata)
                //判断是否到达一页的要求
                if (this.pagetabeldata.length === this.pagesize) {
                    break;
                }
            }
        }
    },

    created() {
        // this.projectList(1);
        // console.log('menu',this.$route);
        if (this.$route.meta.activeMenu) {
            this.active = this.$route.meta.activeMenu
        } else {
            this.active = this.$route.path
        }
        this.selectprodata();
        //console.log('获取当前的时间', new Date(), moment().format('YYYY-MM-DD hh:mm:ss'));
    },
    watch: {
        //监听路由的变化---切换页面的组件
        $route(to, from) {
            if (meta, path) {
                this.active = meta.activeMenu
            } else {
                this.active = path
            }
        }
    }

}
</script>



<style lang="less" scoped>
.header {
    background-color: #d4e0f0;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 10px;

    .el-form-item {
        margin-bottom: 16px;
    }

    .group {
        border: 1px solid #fff;
        padding: 8px;
    }
}

.content {
    background: #c2dde0;

    .el-input {
        width: 70%;
    }

    /deep/ .active-header {
        color: black;
        text-align: center;
    }

    /deep/ .table-center {
        text-align: center;
    }

}

.el-emnu {
    border-right: 0;

    /deep/ .is-active {
        background: #1e78bf !important;
        color: #fff !important;
    }
}
</style>